<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>支付宝支付示例</title>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <script type="text/javascript" src="plugins/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="plugins/vue/vue.js"></script>
        <script type="text/javascript" src="plugins/axios/axios.js"></script>
    </head>
    <body>
        <div id="app" style="margin-left: 100px;margin-right: 100px">
            <input v-model="param.subject" style="width: 100%" type="text" placeholder="请输入商品名称"><br/>
            <input v-model="param.money" style="width: 100%" type="number" placeholder="请输入商品支付金额">
            <input v-model="param.subjectDesc" style="width: 100%" type="text" placeholder="商品描述">
            <button type="button" @click="toPay">支付宝支付</button>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    param: {
                        orderNo: '55',
                        subject: '跳跳熊',
                        money: '999.88',
                        subjectDesc: "这是一个商品的描述信息"
                    }
                }
            },
            methods: {
                toPay() {
                    axios.post("/pay/gobuy", this.param).then(res => {
                        console.log(">>>>>>>>>>" + res.data)
                        $("#app").html(res.data);
                    })
                }
            }
        })
    </script>
</html>
